<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../js/layui/css/layui.css"/>
    <script src="../js/layui/layui.js"></script>
    <script src="../js/jquery/jquery-1.9.1.js"></script>
</head>
<body>
<div id="add-main" style="display: none;">
    <form class="layui-form" id="add-form" action="">
        <input type="hidden" id="id" name="id">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">账号名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="account" name="account" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md3">
            </div>
            <div class="layui-col-md4">
                <button class="layui-btn" lay-submit lay-filter="save" >立即提交</button>
            </div>
            <div class="layui-col-md4">
                <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >重置</button>
            </div>
        </div>
    </form>
</div>
<div id="toolbar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</div>
<table id="date" lay-filter="test" ></table>
</body>
<script>
    layui.use(['table','layer','form','element'], function() {
        var table = layui.table;
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        $(function () {
            var tableList = table.render({
                elem: '#date',
                fit: true,
                cellMinWidth: true, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                url: '../web/haolist', //数据接口
                type: "POST",
                loading: false,
                cols: [
                    [
                        , {field: 'account', width: '20%', title: '账号名称'}
                        , {field: 'update', title: '操作', width: '30%', toolbar: '#toolbar'}
                    ]
                ]
            });
        })

        // 监听你的表格
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            var id = data.id
            var name = data.workname
            //  查看ID  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓  方法
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            }

            if(obj.event==="edit"){
                layer.open({
                    type: 1,
                    title:"修改",
                    closeBtn: false,
                    shift: 2,
                    area: ['800px', '500px'],
                    shadeClose: true,

                    content: $("#add-main"),
                    success: function(layero, index){
                        $('#id').val(data.id);
                        $('#account').val(data.account);
                    },
                    yes:function(){
                    }
                });
            }
        })
    })

    layui.use(['layer', 'form'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

        //提交监听事件
        form.on('submit(save)', function (data) {
            params = data.field;//表单里面所有的值
            //alert(JSON.stringify(params))//
            submit($,params);
            return false;
        })
        var obj = document.getElementById('closeBtn');
        obj.addEventListener('click', function cancel(){
            CloseWin();
        });

    })

    function submit($,params){
        $.post('../web/zhanggai', params, function (data) {//返回的数据
            alert(data)
            if (data.equals("1")) {
                table.reload("date",{})
                CloseWin();//刷新表格
                location.reload(); // 页面刷新
                parent.location.reload();
                layer.close(index);
            }else if(data.equals("2")){
                layui.alert("失败")
            }else{

                location.reload(); // 页面刷新
                return false
            }
        }, 'json');
    }

</script>
</html>